<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1250px;
            height: 600px;
            margin: 42.5px auto;
            border: 1px solid #ccc;
            border-radius: 20px;
            background-color: rgb(248, 245, 245);
        }

        .user {
            float: left;
            width: 348px;
            height: 600px;
            border-radius: 20px 0 0 20px;
            border-right: 1px solid rgb(32, 32, 32);
        }

        .books {
            float: left;
            width: 900px;
            height: 600px;
            border-radius: 0 20px 20px 0;
        }

        .user-info .excuse {
            text-align: center;
            margin-top: 20px;
        }

        .user-info .username {
            text-align: center;
            margin-top: 80px;
        }

        .option {
            width: 348px;
            height: 365px;
            border-radius: 0 0 0 20px;
            margin-top: 50px;
        }

        .option li {
            list-style-type: none;
            width: 348px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 22px;
            background-color: antiquewhite;
        }

        .books ul {
            width: 880px;
            height: 560px;
            margin: 20px 10px;
            overflow-y: scroll;
        }

        .books li {
            float: left;
            width: 420px;
            height: 166px;
            margin-left: 10px;
            margin-bottom: 10px;
            list-style-type: none;
        }

        .books .book-intro {
            width: 400px;
            height: 166px;
        }

        .books .book-intro .img {
            float: left;
            width: 100px;
            height: 155px;
        }

        .books .book-intro .img img {
            width: 100px;
            height: 155px;
        }

        .books .book-intro .info {
            float: left;
            width: 290px;
            margin-left: 10px;
            height: 153px;
        }

        .books .book-intro .info .title {
            width: 290px;
            height: 30px;
            /* margin-bottom: 10px; */
        }

        .books .book-intro .info .title a {
            font-size: 22px;
            text-decoration: none;
            color: black;
        }

        .books .book-intro .info .title a:hover {
            color: #d72929;
        }


        .books .book-intro .info .intro {
            width: 290px;
            height: 56px;
            font-size: 14px;
            margin: 10px 0;
            color: #666666;
            overflow: hidden;
        }

        .books .book-intro .info .author {
            width: 290px;
            height: 30px;
            line-height: 35px;
        }

        .books .book-intro .info .author a {
            font-size: 13px;
            text-decoration: none;
            color: #a6a6a6;
        }

        .books .book-intro .info .author img {
            float: left;
            width: 20px;
            height: 20px;
            margin: 10px 0px;
            margin-right: 10px;
        }

        .books .book-intro .info .author span {
            color: #a6a6a6;
        }

        .books .book-intro .info .author a:hover {
            color: #232222;
        }

        .books .book-intro .info .words {
            height: 23px;
            line-height: 23px;
            font-size: 14px;
            color: #a6a6a6;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="user">
            <div class="user-info">
                <h2 class="username">{{username}}</h2>
                <h1 class="excuse">用户您好</h1>
            </div>
            <ul class="option">
                <li>我的收藏</li>
            </ul>
        </div>
        <div class="books">
            <ul>
                <li>
                    <div class="book-intro">
                        <div class="img">
                            <img src="http://8.141.12.238:8083/book_image/1/cover.jpg">
                        </div>
                        <div class="info">
                            <div class="title">
                                <a href="http://8.141.12.238:8081/read/1/1" target="_blank">灵境行者</a>
                            </div>
                            <div class="author">
                                <img src="http://8.141.12.238:8083/comm_image/user.png">
                                <a href="#">卖报小郎君</a>
                                <span>|</span>
                                <a href="#">科幻</a>
                                <span>|</span>
                                <a href="#">连载</a>
                            </div>
                            <div class="intro">
                                亘古通今，传闻世有灵境。
                                关于灵境的说法，历朝历代的名人雅士众说纷纭，诗中记载：
                                “自齐至唐，兹山濅荒，灵境寂寥，罕有人游。”
                                “灵境不可状，鬼工谅难求。”
                            </div>
                            <div class="words">
                                356.59万字
                            </div>
                        </div>
                    </div>
                    <hr>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>